<template>
  <view v-if="goodsDetail" class="detail">
    <!-- 轮播图 -->
    <swiper
      class="my-swipe"
      circular
      indicator-dots
      indicator-active-color="#fff"
      autoplay
    >
      <block v-for="(item, index) in imgswipe" :key="index">
        <swiper-item>
          <image :src="item" @click="preview(index)" />
        </swiper-item>
      </block>
    </swiper>
    <!-- 详细信息 -->
    <view class="info">
      <view class="titile">
        <van-tag size="large" type="danger" style="margin-right: 5px"
          >自营</van-tag
        >
        {{ goodsDetail.proname }}
      </view>
      <view class="price">￥{{ formatPrice(goodsDetail.originprice) }}</view>
    </view>
    <!-- 商品导航 -->
    <!-- <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :info="store.getAcount"
        @click="toCart"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button text="加入购物车" type="warning" @click="add" />
      <van-goods-action-button text="立即购买" />
    </van-goods-action> -->
    <uni-goods-nav
      style="position: fixed; bottom: 0; left: 0; right: 0"
      :fill="true"
      :options="options"
      :buttonGroup="buttonGroup"
      @click="onClick"
      @buttonClick="buttonClick"
    />
  </view>
</template>

<script setup lang="ts">
import { getGoodsDetail } from '../../api/home'
import type { Goods, detail } from '@/types/home'
import { onLoad } from '@dcloudio/uni-app'
import { formatPrice } from '../../filter/index'
import { ref, watch } from 'vue'
import { useCartStore } from '@/store/cart'

const store = useCartStore()
const goodsDetail = ref({} as Goods)
const goods = ref({} as detail)
const imgswipe = ref<string[]>([])

onLoad(async (options: any) => {
  const res = await getGoodsDetail(options.proid)
  goodsDetail.value = res.data
  imgswipe.value = goodsDetail.value.banners[0].split(',')
})
const options = ref([
  {
    icon: 'headphones',
    text: '客服'
  },
  {
    icon: 'shop',
    text: '店铺'
  },
  {
    icon: 'cart',
    text: '购物车',
    info: store.getAcount
  }
])
const buttonGroup = [
  {
    text: '加入购物车',
    backgroundColor: '#ff0000',
    color: '#fff'
  },
  {
    text: '立即购买',
    backgroundColor: '#ffa200',
    color: '#fff'
  }
]
watch(
  () => store.getAcount,
  newVal => {
    options.value[2]!.info = newVal
  }
)
const onClick = (e: any) => {
  if (e.index === 2) {
    uni.switchTab({
      url: '/pages/cart/index'
    })
  }
}
const buttonClick = (e: any) => {
  if (e.index === 0) {
    goods.value = {
      proid: goodsDetail.value.proid,
      proname: goodsDetail.value.proname,
      img: goodsDetail.value.img1,
      price: goodsDetail.value.originprice,
      number: 1,
      state: true
    }
    store.addToCart(goods.value)
  }
}
const preview = (current: number) => {
  uni.previewImage({
    current,
    urls: imgswipe.value
  })
}
// const toCart = () => {
//   uni.switchTab({
//     url: '/pages/cart/index'
//   })
// }
// const add = () => {
//   goods.value = {
//     proid: goodsDetail.value.proid,
//     proname: goodsDetail.value.proname,
//     img: goodsDetail.value.img1,
//     price: goodsDetail.value.originprice,
//     number: 1,
//     state: true
//   }
//   store.addToCart(goods.value)
// }
</script>

<style lang="less" scoped>
.detail {
  .my-swipe {
    width: 100%;
    height: 700rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }

  .info {
    padding: 20px;
  }

  .titile {
    line-height: 30px;
  }

  .price {
    font-size: 20px;
    color: red;
    font-weight: bold;
  }
}
</style>
